<template>
  <div>
    <transition name='animation'>
      <el-card class="box-card" v-show="flag">
        <div slot="header" class="clearfix">
          <h3>岗位管理</h3>
        </div>
        <el-button type="primary">导出</el-button>
        <template>
          <el-table :data="tableData" style="width: 100%" stripe
                          :header-cell-style="{ background: '#f5f7f9', borderTop: '1px solid #ebeef5', textAlign: 'center' }"
                          :cell-style="{ textAlign: 'center' }">
            <el-table-column type='index' label="序号"></el-table-column>
            <el-table-column prop="name" label="岗位名称" >
            </el-table-column>
            <el-table-column prop="num" label="在职人数" >
            </el-table-column>
            <el-table-column prop="total" label="全职人数"> </el-table-column>
            <el-table-column prop="ps" label="备注"> </el-table-column>
          </el-table>
        </template>
      </el-card>
    </transition>
  </div>
</template>

<script>
export default {
  name: "VueSalarysysStation",

  data() {
    return {
      tableData: [
      ],
      flag:false
    };
  },

  mounted() {
    
    setTimeout(()=>{
      this.flag=true
      this.getData()
    },100)
  },

  methods: {
    async getData(){
      let {data} = await this.$axios.get('/organ/getOrgan')
      this.tableData = data.data
    }
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 30px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

// 动画
.animation-enter,
animation-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

.animation-enter-active {
  transition: all 0.5s ease-in-out;
}

.animation-enter-to,
animation-leave {
  transform: translateX(0);
  opacity: 1;
}
</style>